<template>
  <!-- 这是订单的页面 -->
  <div class="star">
    <div>
      <h2>我的订单</h2>
      <el-divider></el-divider>
    </div>
    <Header></Header>
    <el-table
    :data="tableData.filter(data => !search1 || data.ddname.toLowerCase().includes(search1.toLowerCase()))"
      style="width: 100%"
      stripe
      highlight-current-row
    >
      <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
      <el-table-column label="ID" prop="id" width="50px"> </el-table-column>
      <el-table-column label="订单编号" prop="number" width="150px"> </el-table-column>
      <el-table-column label="订单内容" prop="ddname" width="120px"> </el-table-column>
      <el-table-column label="收件人姓名" prop="sjrname" width="120px"> </el-table-column>
      <el-table-column label="收件人电话" prop="sjrphone" width="150px"> </el-table-column>
      <el-table-column label="收件人地址" prop="sjraddress" width="180px"> </el-table-column>
      <el-table-column label="订单状态" prop="state" width="100px">
        <template slot-scope="scope">
          <div>
            <el-tag v-if="scope.row.state === 0" type="warning"
            >已支付</el-tag
            >
            <el-tag v-else-if="scope.row.state === 1" type="success"
            >配送中</el-tag
            >
            <el-tag
                v-else-if="scope.row.state === 2"
            >已完成</el-tag
            >
            <el-tag
                v-else-if="scope.row.state === -1" type="danger"
            >已取消</el-tag
            >
            <el-tag
                v-else-if="scope.row.state === 3" type="info"
            >退款中</el-tag
            >
            <el-tag
                v-else-if="scope.row.state === 4" type="success"
            >已退款</el-tag
            >
            <el-tag
                v-else-if="scope.row.state === -2" type="danger"
            >拒绝退款</el-tag
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column label="下单时间" prop="startTime" width="150px">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.startTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="预约时间" prop="yjtime" width="150px">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.yjtime) }}</span>
        </template>
      </el-table-column>
      <el-table-column  label="祝福语备注" prop="ddmessage" width="120px"> </el-table-column>
      <el-table-column align="right">
        <template slot="header">
          <el-input
            v-model="search1"
            size="mini"
            placeholder="小主，记得输入订单内容搜索哦"
          />
        </template>
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="primary"
              v-if="scope.row.state === 0"
              @click="displayUpdate(scope.row)"
          >修改</el-button
          >
          <el-button
            size="mini"
            type="danger"
            v-if="scope.row.state === 0"
            @click="cancel(scope.$index, scope.row)"
            >取消</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog :title="current_title" :visible.sync="datasetDialogVisible">
        <el-form ref="form" :model="updateForm" label-width="100px">
          <el-card class="card">
            <div class="dizhi" @click="selectAddressList">
              <div class="dizhil">
                <i class="el-icon-location-outline"></i>
              </div>
              <div class="dizhir">
                <p style="margin-bottom: 5px">{{ updateForm.sjraddress }}</p>
                <p>{{updateForm.sjrname }}&nbsp;{{ updateForm.sjrphone }}</p>
              </div>
              <div class="jt">></div>
            </div>
          </el-card>
          <el-form-item label="预约时间">
            <div>
              <el-date-picker
                  v-model="updateForm.yjtime"
                  type="datetime"
                  placeholder="选择日期时间"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
                type="textarea"
                :rows="5"
                placeholder="写上您的祝福语，可附上署名"
                v-model="updateForm.ddmessage"
                style="width: 500px"
            >
            </el-input>
          </el-form-item>
          <el-form-item align="center">
            <el-button @click="closeUpdate">取消</el-button>
            <el-button type="primary" @click="onSubmit">确定</el-button>
          </el-form-item>
        </el-form>

    </el-dialog>

    <el-dialog title="地址" :visible.sync="dialogVisible" width="40%">
      <div style="cursor: pointer"
          v-for="(item, index) in address"
          :key="index">
        <div class="dialogr" @click="selectAddress(item)">
          <p style="margin-bottom: 5px">
            <i class="el-icon-location-outline" style="color: #ff451b"></i
            >&nbsp;{{ item.fullAdd }}
          </p>
          <p>{{ item.name }}&nbsp;{{ item.phone }}</p>
        </div>
        <el-divider></el-divider>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import { regionData} from "element-china-area-data";

export default {
  components: {},
  props: {},
  data() {
    return {
      dialogVisible: false,
      address: [],
      updateForm: {
        id: null,
        addressId: null,
        sjraddress: "",
        sjrname: "",
        sjrphone: "",
        ddmessage: '',
        yjtime: '',
      },
      options: regionData,
      datasetDialogVisible: false,
      current_title: '修改',
      tableData: [],
      search1:'',
      id:'',
      // 订单编号
      number:'',
      sjrname:'',
      sjrphone:'',
      sjraddress:'',
      yjtime:'',
      ddmessage:'',
      ddname:'',
      pageNum: 1,
      pageSize: 10,
      total: 0,
      userInfo: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
    };
  },
  watch: {},
  computed: {},
  methods: {
    closeUpdate() {
      this.datasetDialogVisible = false;
    },
    // 提交修改
    onSubmit() {
      this.$confirm('是否对订单信息进行修改', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning',
        center: true
      }).then(() => {
        if (this.time === "") {
          this.$message({
            type: "warning",
            message: "请选择日期",
          });
        } else {
          this.request.post("/dingdan/update", this.updateForm).then((res) => {
            if (res.data.code === "200") {
              this.$message.success("修改成功");
              this.datasetDialogVisible = false;
              this.load();
            } else {
              this.$message.error("系统错误!");
            }
          });
        }
      })
    },
    displayUpdate(row) {
      this.updateForm.id = row.id
      this.updateForm.addressId = row.addressId
      this.updateForm.sjraddress = row.sjraddress
      this.updateForm.sjrname = row.sjrname
      this.updateForm.sjrphone = row.sjrphone
      this.updateForm.yjtime = row.yjtime
      this.updateForm.ddmessage = row.ddmessage
      if (this.updateForm.ddmessage === '-') {
        this.updateForm.ddmessage = ''
      }
      this.datasetDialogVisible = true
    },
    selectAddressList() {
      this.dialogVisible = true;
      this.request.get("/address/page?uid=" + this.userInfo.data.id).then(res => {
        this.address = res.data.data.records;
      })
    },
    // 选择地址
    selectAddress(item) {
      this.updateForm.addressId = item.id;
      this.updateForm.sjraddress = item.fullAdd;
      this.updateForm.sjrname = item.name;
      this.updateForm.sjrphone = item.phone;
      this.dialogVisible = false;
    },
    parseTime(time) {
      let date = new Date(Date.parse(time)).getTime();
      return this.$moment(date).format("YYYY-MM-DD HH:mm");
    },
    // 取消按钮
    cancel(index,row) {
      this.$confirm('小主！您的操作将取消订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.request.get('/dingdan/cancel?id='+row.id).then(res=>{
            if(res.data.code ==="200"){
              this.$message.success("操作成功！")
              this.load()
             }
          })
        }).catch(() => {
          this.$message({
            type: 'warning',
            message: '还好还好！可以挽回！已为您继续进行该订单'
          });
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 页面初始化
    load() {
      this.request
        .get("/dingdan/page", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            number: this.number,
            uid: this.userInfo.data.id,
          },
        })
        .then((res) => {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
        });
    },
  },
  created() {
    if (this.userInfo.data === undefined) {
      this.$router.push("/login");
      this.$message({
        showClose: true,
        type: "warning",
        message: "请进行登录！",
      });
    }
    this.load();
  },
  mounted() {},
};
</script>
  <style lang="less" scoped>
.star {
  .compute {
    float: right;
    display: flex;
    // margin-bottom: 5%;
    // position: fixed; 是相对于浏览器窗口固定的。即使窗口滚动。他也不会移动
    position: fixed;
    top: 650px;
    right: 45px;

    .heji {
      // float: right;
      margin: 13px 50px;
      text-align: center;
      .price {
        color: red;
        font-size: 20px;
      }
    }
    .jiesuan {
      margin: 10px;
    }
  }
  .block {
    float: right;
    margin-top: 15px;
  }
}
.card {
  height: 120px;
  margin: 20px 30px;
}
.dizhi {
  display: flex;
  cursor: pointer;
}
.dizhil {
  line-height: 70px;
  font-size: 40px;
  color: #ff451b;
  margin-right: 40px;
}
.jt {
  font-size: 30px;
  position: absolute;
  right: 120px;
  color: #b8bbbd;
}
</style>